<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的插槽(slot)</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <body-content>
            <!-- <div slot="header">header</div> --> <!-- 2. 插槽就是随意的在vue的模板中添加,这里定义两个div,这俩的作用就是当做插槽插入组件模板指定的位置 -->
            <div slot="footer">footer</div> <!-- 3. 指定div的slot属性,相当于给这个div起个别名 -->
        </body-content>
    </div>

    <script>
        // 1. 先定义一个组件
        Vue.component('body-content', {
            // 4. 如果要将标签插入到模板指定的地方,需要使用slot标签,name属性值就是上面标签的slot属性值,这样就会将指定的标签插入. 如果不指定这俩属性,那么不起效果
            // 5. 插槽还可以设置默认的值,只需要在slot标签中写上默认值就可以了,上面如果没有指定的插槽,就会展示这个默认的
            template: `
                        <div>
                            <slot name="header">
                                defaultVal
                            </slot>
                            
                            <div>
                                哈哈
                            </div>

                            <slot name="footer"></solt>
                        </div>
                      `
        });

        const app = new Vue({
            el: '#app',

        })
    </script>
</body>

</html>